<!-- 账户信息-->
<template>
  <div>
    <el-form
      :rules="rules"
      :model="typeForm"
      ref="typeForm"
      label-width="180px"
      label-position="left"
    >
      <el-form-item label="开户名称：" prop="bankName">
        <el-input v-if="typeStatus !='view'" v-model.trim="typeForm.bankName" autocomplete="off"></el-input>
        <span v-else>{{typeForm.bankName}}</span>
      </el-form-item>
      <el-form-item label="开户账户：" prop="bankAccount">
        <el-input v-if="typeStatus !='view'" v-model.trim="typeForm.bankAccount" autocomplete="off"></el-input>
        <span v-else>{{typeForm.bankAccount}}</span>
      </el-form-item>
      <el-form-item label="开户行名称：" prop="openingBank">
        <el-input
          v-if="typeStatus !='view'"
          :disabled="true"
          v-model.trim="typeForm.openingBank"
          autocomplete="off"
        >
          <el-button slot="append" type="primary" @click="bankShow = true">选择</el-button>
        </el-input>
        <span v-else>{{typeForm.openingBank}}</span>
      </el-form-item>
      <el-form-item label="联行号：" prop="bankNumber">
        <el-input
          v-if="typeStatus !='view'"
          :disabled="true"
          v-model.trim="typeForm.bankNumber"
          autocomplete="off"
        ></el-input>
        <span v-else>{{typeForm.bankNumber}}</span>
      </el-form-item>
      <el-form-item label="地区代码信息：" prop="bankAreaCode">
        <el-input
          v-if="typeStatus !='view'"
          v-model="typeForm.bankAreaCode"
          autocomplete="off"
          disabled
        ></el-input>
        <span v-else>{{typeForm.bankAreaCode}}</span>
      </el-form-item>
      <el-form-item label="开户行所属省/市：">
        <div class="flex-box" v-if="typeStatus !='view'">
          <el-form-item prop="openingBankProvince">
            <el-input
              :disabled="true"
              v-model.trim="typeForm.openingBankProvince"
              placeholder="省"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="openingBankCity">
            <el-input
              :disabled="true"
              v-model.trim="typeForm.openingBankCity"
              placeholder="市"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </div>
        <span v-else>{{(typeForm.openingBankProvince ||'')+(typeForm.openingBankCity||'')}}</span>
      </el-form-item>
    </el-form>
    <bankBranchModal :visible.sync="bankShow" @onSave="editBank"></bankBranchModal>
  </div>
</template>

<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
import bankBranchModal from "../../common/bankBranchModal"; //选择开户行
export default {
  components: {
    bankBranchModal
  },
  props: ["typeForm", "typeStatus","necessary"],
  data() {
    return {
      //typeStatus: "add",
      bankShow: false,
      rules: {
        openingBank: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value && this.necessary) {
                callback(new Error("请选择开户行"));
              }
              if (value && value.length > 30) {
                callback(new Error("开户行名称长度不能大于30"));
              }
              callback();
            }
          }
        ],
        bankNumber: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              const reg = /^\d{12}$/;
              if (value && !reg.test(value)) {
                callback(new Error("请输入正确格式的联行号"));
              } else {
                callback();
              }
            }
          }
        ],
        bankName: [
          {
            required: false,
            message: "请输入开户名称",
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              if (!value && this.necessary) {
                callback(new Error("请输入开户名称"));
              }
              if (value && value.length > 30) {
                callback(new Error("开户名称长度不能大于30个字符"));
              }
              callback();
            }
          }
        ],
        bankAreaCode: [
          { required: false, message: "请输入地区代码信息", trigger: "blur" }
        ],
        bankAccount: [
          {
            required: false,
            trigger: ["blur", "change"],
            validator: (rule, value, callback) => {
              const reg = /^[0-9]\d*$/;
              if (!value && this.necessary) {
                callback(new Error("请输入开户账户"));
              }
              if (value && !reg.test(value)) {
                callback(new Error("请输入正确格式的银行账号"));
              } else {
                callback();
              }
            }
          }
        ],
        openingBankProvince: [
          { required: false, message: "请选择省份", trigger: "change" }
        ],
        openingBankCity: [
          { required: false, message: "请选择城市", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    veri() {
      let _this = this;
      return new Promise((resolve, reject) => {
        _this.$refs.typeForm.validate(valid => {
          resolve(valid);
        });
      });
    },
    editBank(val) {
      ({
        bankBranchName: this.typeForm.openingBank,
        cityName: this.typeForm.openingBankCity,
        provinceName: this.typeForm.openingBankProvince,
        linkNumber: this.typeForm.bankNumber,
        openCode: this.typeForm.bankAreaCode
      } = val);
    }
  },
  created() {},
  destroyed() {},
  filters: {},
  computed: {}
};
</script>
<style lang="stylus" scoped>
.flex-box {
  display: flex;
}

.flex-box>* {
  margin-right: 10px;
}

.flex-box>*:last-child {
  margin-right: 0;
}</style>
<style lang="stylus">
.posterurl .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>

